<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-19 22:48:50
 * @LastEditTime: 2024-06-21 16:39:18
-->
<script lang="ts" setup>
import { usePicker } from "@/hooks/store/index";
const { color, predefineColors, pickerOption, pickerChange } = usePicker();
</script>
<template>
  <el-divider content-position="center"
    ><span class="font-size-4">{{ $t(`title.themeColor`) }}</span></el-divider
  >
  <div class="picker padding-left-right-10">
    <div class="between-space-justify padding-top-bottom-3" v-for="item in pickerOption">
      <span style="font-size: 15px">{{ $t(item.label) }}</span>
      <el-color-picker
        v-model="color[item.value]"
        show-alpha
        size="large"
        :predefine="predefineColors"
        @change="pickerChange(item.value,item.el, $event)"
      />
    </div>
  </div>
</template>
